<template>
    <el-row>
        <el-col :span="6">
            <el-card class="box-card">
              <el-select v-model="functionalModule" placeholder="请选择" >
                <el-option
                    v-for="item in functionalModules"
                    :key="item.value"
                    :label="item.label"
                    :value="item.value"
                >
                </el-option>
              </el-select>
            </el-card>
        </el-col>
        <el-col :span="6">
         <el-card class="box-card-elm">
            <el-select v-model="analysisArea" multiple collapse-tags collapse-tags-tooltip style="width:200px;">
              <el-option
                v-for="item in analysisAreas"
                :key="item.value"
                :label="item.label"
                :value="item.value"
              >
              </el-option>
            </el-select>
         </el-card>
        </el-col>
        <el-col :span="6">
          <el-card class="box-card">
            <el-button type="primary" @click="submitElm">提交</el-button>
            <el-button type="primary" @click="reselectElm">重新选择</el-button> 
          </el-card>  
        </el-col>
        <el-col :span="6">
          <el-card class="box-card-elm"></el-card>
        </el-col>
    </el-row>
    <el-row>
        <el-col :span="10">
           <el-table :data="tableData" stripe style="width: 100%;height: 100%" height="351">
                <el-table-column prop="st" label="场站" width="180" />
                <el-table-column prop="elm" label="元件" width="180" />
            </el-table>
        </el-col>
        <el-col :span="14">
           <el-table :data="tableData2" stripe style="width: 100%;height: 100%" height="351">
              <el-table-column prop="act" label="开关动作" width="180" />
              <el-table-column prop="target_source" label="供电路径" width="180" />
              <el-table-column prop="t" label="决策时间" width="180" />
              <el-table-column prop="recover" label="恢复功率" width="180" />
              <el-table-column prop="loading_percent" label="转供后负载率" width="90" />
           </el-table> 
        </el-col>
    </el-row>
</template>

<script lang="ts" setup>
import { computed, defineComponent, ref,watch,onMounted } from "vue";
import axios from "axios";
import {BASE_URL} from '@/utils/common.js'

const functionalModule = ref("");
const analysisArea = ref([]);

const functionalModules = ref([
  {value:"",label:"请选择"},  
  // ... 其他功能模块
]);

const analysisAreas = ref([
   
])

const reselectElm = ()=>{
    tableData.value=[]
    analysisAreas.value=[]
    analysisArea.value=[]
    functionalModule.value= ''
}

const tableData2 = ref([])
const submitElm = async()=>{
  const response =  await axios.post(BASE_URL+'/submitElmIdx',
    tableData.value,{
        headers: {  
            'Content-Type': 'application/json', // 明确指定请求头为JSON  
          }, 
    })
    tableData2.value = response.data
    console.log(response.data)
}

const getElmBySt = async (st)=>{
   const response = await axios.get(BASE_URL+'/getElmBySt?st='+st);

   for(let i=0;i<response.data.length;i++){
       let item = {label:response.data[i].elm,value:response.data[i].elm,
       type:response.data[i].type,idx:response.data[i].idx}
       analysisAreas.value.push(item)
   }
}

watch(functionalModule,(newVal,oldVal)=>{
   console.log("param1是::"+newVal);
   analysisAreas.value=[]
   getElmBySt(newVal)
})

watch(analysisArea,(newVal,oldVal)=>{
   // 添加新选中的值（去除已经存在的）  
      const newItems = newVal.filter(val => !oldVal.includes(val));  
      console.log(newItems[0]);
      console.log(analysisAreas);
      const foundItem = analysisAreas.value.find(item => item.value === newItems[0])
      console.log(foundItem);
      if(foundItem){
          let tableItem = {idx:foundItem.idx,elm:foundItem.value,st:functionalModule.value,type:foundItem.type}
          tableData.value.push(tableItem)
      }
})

const tableData=ref([])

onMounted(async ()=>{
   try {  
        // 发送 GET 请求到后台接口  
        const response = await axios.get(BASE_URL+'/getStList');  
        for(let i=0;i<response.data.length;i++){
            console.log(response.data[i])
            let item = {label:response.data[i],value:response.data[i]}
            functionalModules.value.push(item)
        }
        
      } catch (err) {  
        console.error('Error fetching data:', err);  
        
      }  
})

</script>

<style scoped lang="scss">
.box-card {
  background-color: rgb(26, 68, 94);
  color: rgb(245, 245, 245);
  border-width: 0;
  border-radius: 0;
}

.box-card-elm{
    background-color: rgb(26, 68, 94);
  color: rgb(245, 245, 245);
  border-width: 0;
  border-radius: 0;
  height: 74px;
}



</style>